<template>
  <div class="course-detail-list">
    <el-table
      ref="tab"
      border
      :data="courseList"
      height="250"
      @current-change="onSelectRow"
      highlight-current-row
    >
      <el-table-column prop="name" label="分类名称" />
    </el-table>

    <!-- 分页 -->
<!--    <el-pagination-->
<!--      @size-change="pageSizeChange"-->
<!--      @current-change="pageIndexChange"-->
<!--      :current-page.sync="pageIndex"-->
<!--      :page-sizes="[10, 20, 50]"-->
<!--      :page-size="pageSize"-->
<!--      :total="totalCount"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--    ></el-pagination>-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        courseList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        name: ''
      }
    },
    props: {
      selectedId: {
        type: String,
        required: false,
        default: ''
      }
    },
    methods: {
      pageIndexChange(val) {
        this.pageIndex = val
        this.loadMore()
      },
      pageSizeChange(val) {
        this.pageSize = val
        this.loadMore()
      },
      async reload() {
        this.pageIndex = 1
        await this.loadMore()
      },
      async loadMore() {
        let res = await this.$http.post('/exam-admin/daily/cate/tree', {
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.name
        })
        console.log(res)
        this.totalCount = res.data.totalCount
        this.courseList = res.data
      },
      onSelectRow(val) {
        if (!val) return
        this.$emit('onSelect', { id: val.id, title: val.name })
      }
    },
    async mounted() {
      await this.reload()
      if (this.selectedId) {
        let row = this.courseList.find(x => x.id === this.selectedId)
        this.$nextTick(() => {
          this.$refs.tab.setCurrentRow(row)
        })
      }
    }
  }
</script>

<style>
</style>
